<template>
    <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            x:"",
            y:"",
            xData: [""], //横坐标
            yData: [], //人数数据
            taskDate: [],
            myChartStyle: { float: "left", width: "23%", height: "500px"} //图表样式
        };
    },
    mounted() {
        this.initEcharts(),
        this.getCaseNumByState()
    },
    methods: {
        initEcharts() {
            // 多列柱状图
            const mulColumnZZTData = {
                xAxis: {
                    data: this.xData
                },
                // 图例
                legend: {
                    data: ["待完成", "已完成"],
                    top: "0%"
                },
                yAxis: {},
                series: [
                    {
                        type: "bar", //形状为柱状图
                        data: this.yData,
                        name: "待完成", // legend属性
                        label: {
                            // 柱状图上方文本标签，默认展示数值信息
                            show: true,
                            position: "top"
                        }
                    },
                    {
                        type: "bar", //形状为柱状图
                        data: this.taskDate,
                        name: "已完成", // legend属性
                        label: {
                            // 柱状图上方文本标签，默认展示数值信息
                            show: true,
                            position: "top"
                        }
                    }
                ]
            };
            const myChart = echarts.init(document.getElementById("mychart"));
            myChart.setOption(mulColumnZZTData);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myChart.resize();
            })
        },
        async getCaseNumByState() {
            const { data: res } = await this.$http.get("/api/case/all")
            if (res.meta.status !== 200) return
            var x=0,y=0;
            var data=res.data
            for(let i=0;i<data.length;i++){
                if(data[i].case_state=="待完成"){
                    x++;
                }
                else{
                    y++;
                }
            }
            this.yData.push(x)      
            this.taskDate.push(y)
            this.initEcharts()
        }
    }
}
</script>
<style scoped>
.echart{
    margin-left:130px;
}
</style>